<!doctype html>
<html>

   <head>
       <meta charset="utf-8">
       <title>用Canvas画一个刮刮乐</title>
       <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
       <style>
           .content,
           .cover {
               width: 400px;
               height: 400px;
               position: absolute;
               left: 50%;
               top: 50%;
               margin: -200px 0 0 -200px;
           }
           
           .content {
               font-size: 48px;
               line-height: 200px;
               text-align: center;
               color: red;
           }
           
           h3 {
               text-align: center;
               line-height: 200px;
               color: deepskyblue;
           }
       </style>
   </head>

   <body>
       <h3>刮刮乐</h3>
       <div class="content">蚂蚁会员vip</div>
       <!-- 创建一个画布（Canvas）-->
       <canvas id="cover" class="cover" width="400" height="400"></canvas>

   </body>
   <script>
       /*使用 JavaScript 来绘制图像*/
       var isdown = false,
           cover = document.getElementById("cover"), //首先，找到 <canvas> 元素:
           covercanvas = cover.getContext("2d"); //然后，创建 context 对象：

       //下面的两行代码绘制一个灰色的矩形：
       //设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
       covercanvas.fillStyle = "transparent";
       covercanvas.fillRect(0, 0, 400, 200);

       //canvas 是一个二维网格。
       //canvas 的左上角坐标为 (0,0)

       //上面的 fillRect 方法拥有参数 (0,0,400,200)。
       //意思是：在画布上绘制 400x200 的矩形，从左上角开始 (0,0)。
       function fillter(canvas) {
           canvas.fillStyle = "pink";
           canvas.fillRect(0, 0, 400, 200);
       }

       function isDown(e) {
           e.preventDefault();
           isdown = true;
       }

       function isUp(e) {
           isdown = false;
       }

       function draw(e) {
           e.preventDefault();
           if(isdown) {
               if(e.changedTouches) {
                   e = e.changedTouches[e.changedTouches.length - 1];
               }
               var _height = parseInt((window.innerHeight - 400) / 2),
                   _width = parseInt((window.innerWidth - 400) / 2),
                   touchTop = e.clientY - _height,
                   touchLeft = e.clientX - _width;
               with(covercanvas) {
                   beginPath();
                   arc(touchLeft, touchTop, 30, 0, Math.PI * 2);//橡皮檫
                   fill();
               }
           }
       
       }

       fillter(covercanvas);
       covercanvas.globalCompositeOperation = 'destination-out';
       cover.addEventListener('touchstart', isDown);
       cover.addEventListener('touchmove', draw);
       cover.addEventListener('touchend', isUp);
       cover.addEventListener('mousemove', draw);
       cover.addEventListener('mousedown', isDown);
       cover.addEventListener('mouseup', isUp);
   </script>

</html>